---
import config from '@/config';

interface StringTitleProp {
  pageTitle: string;
  pageDesc?: string;
}

interface ArrayTitleProp {
  pageTitle: [string, string];
  titleTransition: string;
  pageDesc?: string;
}

export type Props = StringTitleProp | ArrayTitleProp;

const { props } = Astro;
---

<main id="main-content" class="max-w-app mx-auto w-full px-4 pt-8 pb-4">
  {
    'titleTransition' in props ? (
      <h1 class="text-2xl font-semibold sm:text-3xl">
        {props.pageTitle[0]}
        <span transition:name={props.titleTransition}>{props.pageTitle[1]}</span>
      </h1>
    ) : (
      <h1 class="text-2xl font-semibold sm:text-3xl">{props.pageTitle}</h1>
    )
  }
  <p class="mt-2 mb-6 italic">{props.pageDesc}</p>
  <slot />
</main>
